<template>
  <div class="pageListWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">企业:</span>
                <span class="searchInputFont">
                  <el-select v-model="searchInfo.enterpriseNo" @change="searchRowsInfo(true)" size="mini" clearable placeholder="全部">
                    <el-option label="全部" value=""></el-option>
                    <el-option
                      v-for="item in this.$store.state.companyInfos"
                      :key="item.enterpriseNo+''"
                      :label="item.enterpriseName"
                      :value="item.enterpriseNo+''">
                    </el-option>
                  </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">类型:</span>
                <span class="searchInputFont">
                  <el-select v-model="searchInfo.statisType" @change="searchRowsInfo(true)" size="mini" placeholder="统计类型">
                    <el-option
                     v-for="item in statisTypeList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
                    </el-option>
                  </el-select>
                </span>
              </div>
            </el-col>       
            <el-col v-if="searchInfo.statisType==1" :span="8">
              <div searchInfo.statisType class="searchWrap">
                <span class="searchFont">时间:</span>
                <span class="searchInputFont">
                  <el-date-picker
                   style="width: 100%;"
                   v-model="time"
                   type="daterange"
                   align="left"
                   placeholder="选择日期范围"
                   size="mini"
                   :picker-options="$store.state.pickerOptions2"
                   @change="searchRowsInfo(true)">
                  </el-date-picker>
                </span>
              </div>
            </el-col>            
            <el-col v-if="searchInfo.statisType==2" :span="5">
              <div class="searchWrap">
                <span class="searchFont">时间:</span>
                <span class="searchInputFont">
                   <el-date-picker
                     v-model="date"
                     @change="searchRowsInfo(true)"
                     style="width: 100%;"
                     align="right"
                     type="date"
                     size="mini"
                     value-format="yyyy-MM-dd"
                     placeholder="选择日期">
                  </el-date-picker>
                </span>
              </div>
            </el-col>
            <div style="float: right;margin-right: 10px;">
              <el-button type="primary" size="mini" @click="searchRowsInfo()">查询</el-button>
            </div>
          </el-row>
        </div>
      </div>
      <div class="tableContainer" style="padding-bottom: 20px">
        <div class="lineChart">
          <div id="lineChart" style="width: 100%;height: 100%;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        echartsNames: [],
        dataList: [[], [], [], [], [], [], []],
        timeList: [],
        title: '数量',
        seriesData: [],
        colors: [],

        time: [new Date(new Date().getTime()-24*3600*8*1000), new Date(new Date().getTime()-24*3600*1000)],
        date: new Date(new Date().getTime()-24*3600*1000),
        searchInfo: {
          beginDate: '',
          endDate: '',
          enterpriseNo: '',
          statisType: 2,
        },
        statisTypeList: [
          {id:2, name:'小时'},
          {id:1, name:'日期'},
        ]
      }
    },
    props:{},
    created(){
      // 查询各企业 车辆 总数趋势
      this.searchRowsInfo()
    },
    methods: {
      searchRowsInfo(val){
        let {currentPage, searchInfo, time, date}=this
        val?currentPage=1:''

        if (time&&time[0] != null&&searchInfo.statisType==1) {
          searchInfo.beginDate = this.dtime(this.time[0]).format('YYYY-MM-DD')
          searchInfo.endDate = this.dtime(this.time[1]).format('YYYY-MM-DD')
        } else {
          searchInfo.beginDate = this.dtime(date).format('YYYY-MM-DD')
          searchInfo.endDate = this.dtime(date).format('YYYY-MM-DD')
        }

        this.axios.post(process.env.API_HOST + '/statis/selectBikeList', searchInfo).then(response => {
        let result = response.data
        if (result.code === 200) {
          result=result.result

          this.timeList=[]
          this.echartsNames=[]
          this.dataList=[[], [], [], [], [], [], []]

          for(var i=0;i<result.length;i++){
            if(searchInfo.statisType==1){
              this.timeList.push(this.dtime(result[i].statisDate).format('MM-DD'))
            }else{
              this.timeList.push(result[i].statisHour)
            }
            if (result[i].colletions.length > 0) {
              var colletions=result[i].colletions
              colletions=this.sortByKey(colletions, 'enterpriseNo')
              for(var k=0;k<colletions.length;k++){
                this.colors.push(this.$store.state.splitMapColors[colletions[k].enterpriseNo])
                if(i==0){
                  this.echartsNames.push(colletions[k].enterpriseName)
                }
                this.dataList[k].push(colletions[k].statisCount)
              }
            }
          }
          this.unique(this.echartsNames)
          this.initData()
        }
      })
      },
      disposeData(){
        //处理颜色
        /*this.colors = []
        this.$store.state.companyInfos.forEach(item => {
          if(this.searchInfo.enterpriseNo!=''){
            if(this.searchInfo.enterpriseNo == item.enterpriseNo){
              this.colors.push(item.color)
            }
          }else{
            this.colors.push(item.color)
          }
        })*/
        this.seriesData = []

        this.echartsNames.forEach((item, key) => {
          this.seriesData.push({
            name: item,
            type: 'line',
            symbol: 'circle',
            smooth: true,
            symbolSize: 5,
            showSymbol: false,
            data: this.dataList[key],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                // {type: 'min', name: '最小值'}
              ]
            },
          })
        })
      },
      initData(){
        this.disposeData()

        if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
          this.myChart.dispose();
        }

        this.myChart = this.echarts.init(document.getElementById('lineChart'))
        const option = {
          color: this.colors,
          title: {
            show: false,
            text: "",
            subtext: '',
            x: 'left',
            textStyle: {
              fontSize: 14,
              fontWeight: 'bolder',
              color: "#3975FE"        // 主标题文字颜色
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },

          },
          legend: {
            x: 'right',
            data: this.echartsNames,
            textStyle: {
              fontSize: 12,
              color: 'gray'          // 主标题文字颜色
            },
          },
          grid: {
            left: '1%',
            right: '1%',
            bottom: '4%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.timeList,
              axisTick: {
                alignWithLabel: true
              },
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: 'gray'
              },
              axisLine: {
                lineStyle: {
                  color: 'gray',
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: this.title,
              min: 0,
              textStyle: {// 其余属性默认使用全局文本样式
                color: 'gray'
              },
              axisLine: {
                lineStyle: {
                  color: 'gray'
                }
              }
            }
          ],
          series: this.seriesData
        }
        this.myChart.setOption(option)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .pageListWrap
    page()
  .lineChart
    padding 10px
    width: 100%
    height 100%;
    box-sizing border-box
    border-radius 15px
    text-align left
</style>